<template>
  <el-input
    size="small"
    v-model="searchParams.productName"
    placeholder="请输入商品名称"
    style="width: 300px"
  ></el-input>
  <el-button
    type="primary"
    style="margin-left: 5px"
    size="small"
    @click="searchList"
    >搜索</el-button
  >
  <el-button size="small" @click="rest">重置</el-button>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" plain size="small" style="margin-top: 10px"
         @click="addProduct">新增</el-button
      >
    </el-col>
  </el-row>

  <el-table
    :data="goodsList"
    style="width: 100%; height: 100%; margin-top: 10px"
  >
    <el-table-column label="商品名称" align="center" prop="name" />
    <el-table-column label="商品图片" align="center" prop="image" width="100">
      <template v-slot="scope">
        <el-image :src="$apiImg+scope.row.image" style="width: 50px; height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="商品价格" align="center" prop="price" />
    <el-table-column label="操作" align="center">
      <template v-slot="scope">
        <el-button size="small" type="primary" @click="editRow(scope.$index)"
          >修改</el-button
        >
        <el-button size="small" type="danger" @click="deleteRow(scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 10px"
    v-model:current-page="searchParams.currentPage"
    v-model:page-size="searchParams.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    size="small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(totalItems)"
    @size-change="searchList"
    @current-change="searchList"
  />
  <el-dialog
    v-model="dialogFormEVisible"
    title="商品修改"
    :lock-scroll="false"
  >
    <el-form
      ref="productForm"
      :model="formData"
      label-position="right"
      label-width="80px"
    >
    <el-form-item label="商品封面" prop="image">
      <el-upload
        drag
        :action="$apiImg+'/api/uploadImage?filetype=product'"
        :on-success="handleProductSuccess"
        :show-file-list="false"
      >
      <img
          v-if="formData.image"
          :src="$apiImg+formData.image"
          style="width: 300px;"
        />
        <el-icon class="el-icon--upload" v-else><upload-filled /></el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model="formData.price" :precision="2" :step="0.1" />
      </el-form-item>
      <el-form-item label="商品介绍" prop="description">
        <el-input
          v-model="formData.description"
          :rows="2"
          type="textarea"
          placeholder="请输入商品介绍"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
    v-model="dialogFormVisible"
    title="商品添加"
    :lock-scroll="false"
  >
    <el-form
      ref="productForm"
      :model="formData"
      label-position="right"
      label-width="80px"
    >
    <el-form-item label="商品封面" prop="image">
      <el-upload
        drag
        :action="$apiImg+'/api/uploadImage?filetype=product'"
        :on-success="handleProductSuccess"
        :show-file-list="false"
      >
      <img
          v-if="formData.image"
          :src="$apiImg+formData.image"
          style="width: 300px;"
        />
        <el-icon class="el-icon--upload" v-else><upload-filled /></el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model="formData.price" :precision="2" :step="0.1" />
      </el-form-item>
      <el-form-item label="商品介绍" prop="description">
        <el-input
          v-model="formData.description"
          :rows="2"
          type="textarea"
          placeholder="请输入商品介绍"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddSubmit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { listApi, delProductApi, addProductApi, updateProductApi } from '@/api/system/commlist'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const data = reactive({
      searchParams: {
        currentPage: 1,
        pageSize: 5,
        productName: ''
      },
      dialogFormEVisible: false,
      dialogFormVisible: false,
      formData:{},
      totalItems: '',
      goodsList: []
    })
    const searchList = () => {
      listApi(data.searchParams).then((res) => {
        if (res) {
          data.goodsList = res.data.data
          data.totalItems = res.data.total
        }
      })
    }
    const rest = () => {
      data.searchParams.productName = ''
    }
    const addProduct = () => {
      data.dialogFormVisible = true
    }
    const editRow = (index) => {
      data.dialogFormEVisible = true
      data.formData = data.goodsList[index]
    }
    const onSubmit = () => {
      updateProductApi(data.formData).then((detail) => {
        if (detail.data) {
          ElMessage({
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          return null
        }
        data.dialogFormEVisible= false
      })
    }
    const onAddSubmit = () => {
      addProductApi(data.formData).then((detail) => {
        if (detail.data) {
          ElMessage({
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        } else {
          return null
        }
        data.dialogFormVisible= false
      })
    }
    const deleteRow=(index)=> {
      delProductApi({productId:data.goodsList[index].id}).then((res)=>{
        if(res&&(data.goodsList.splice(index, 1))){
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }
    searchList()
    return {
      ...toRefs(data),
      searchList,
      rest,
      editRow,
      onSubmit,
      deleteRow,
      addProduct,
      onAddSubmit
    }
  },
  methods:{
    handleProductSuccess(res) {
      if (res) {
        ElMessage({
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.formData.image = res
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
